<!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
-->

<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="layout" content="main" />
    <link rel="stylesheet" href="${resource(dir:'css',file:'style.css')}" />
    <script language="javascript" type="text/javascript" src="${resource(dir:'js',file:'jscharts.js')}"></script>
    <title>Detalles de Sistema</title>
  </head>
  <body>
    <h1>${sistema.nombre}</h1>

    <div>
      <table>
        <tr>
          <td>Calidad </td>
          <td>
            <div id="indicator">
              ${sistema.calidad}
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div id="chartcontainer"></div>
    <script language="javascript" type="text/javascript">
      var colors = ['#B2C846', '#C40000'];
      var myData = new Array(['Defectos Solucionados',${sistema.solucionados / sistema.encontrados * 100}],
                             ['Defectos sin solucionar',${(sistema.encontrados - sistema.solucionados) / sistema.encontrados * 100}]);
      var myChart = new JSChart("chartcontainer", "pie");
      
      myChart.setDataArray(myData);
      myChart.colorizePie(colors);
      myChart.setTitle('Relación de defectos en el sistema ${sistema.nombre} (%)');
      myChart.setTitleColor('#8E8E8E');
      myChart.setTitleFontSize(11);
      myChart.setTextPaddingTop(30);
      myChart.setSize(616, 321);
      myChart.setPiePosition(308, 170);
      myChart.setPieRadius(85);
      myChart.setPieUnitsColor('#555');

      myChart.draw();
    </script>    

    <div id="chartcontainer2"></div>
    <script language="javascript" type="text/javascript">

      var myData = new Array(
        <g:each var="error" status="i" in="${sistema.errores}">
          ['${error.nombre}', ${error.porcentaje}]<g:if test="${i < (sistema.errores.size - 1)}">,</g:if>
        </g:each>
      );
      var myChart = new JSChart("chartcontainer2", "pie");
      myChart.setDataArray(myData);
      myChart.setTitle('Relación de tipos de defectos en el sistema ${sistema.nombre} (%)');
      myChart.setTitleColor('#8E8E8E');
      myChart.setTitleFontSize(11);
      myChart.setTextPaddingTop(30);
      myChart.setSize(616, 321);
      myChart.setPiePosition(308, 170);
      myChart.setPieRadius(85);
      myChart.setPieUnitsColor('#555');

      myChart.draw();
    </script>
  </body>
</html>
